<template>
  <div>
    <s-breadcrumb></s-breadcrumb>
    <el-card>
      <el-row :gutter="20" class="s_row">
        <el-col :span="2">
          <el-button type="info" @click="$router.go(-1)">返回</el-button>
        </el-col>
      </el-row>
      <el-table :data="list" border default-expand-all row-key="id">
        <el-table-column label="评价内容" prop="content" fixed="left" width="200"></el-table-column>
        <el-table-column label="用户昵称" prop="user_to.nick_name" width="250"></el-table-column>
        <el-table-column label="头像" align="center" prop="user_to.avatar_url" width="200">
          <template slot-scope="scope">
            <el-image class="list_image" :src="scope.row.user_to.avatar_url" :preview-src-list="[scope.row.user_to.avatar_url]">
              <div slot="error" class="image-error">暂无图片</div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status" width="150">
          <template slot-scope="scope">
            <el-tooltip effect="dark" :content="scope.row.status?'显示':'隐藏'" placement="top" :enterable="false">
              <el-switch v-model="scope.row.status" :disabled="status_btn" active-color="#5FB878" inactive-color="#d2d2d2" @change="set_status(scope.row)"></el-switch>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="添加时间" align="center" prop="created_at" width="200" sortable></el-table-column>
        <el-table-column label="操作" align="center" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button :disabled="destroy_btn" type="danger" icon="iconfont icon-shanchu" size="mini" @click="destroy(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      status_btn: this.is_string('shop/consult/evaluate_status'), // 状态按钮是否禁用
      destroy_btn: this.is_string('shop/consult/evaluate_destroy'), // 删除按钮是否禁用
      percentage_width: this.$config.percentage_width, // 弹框的宽度
      list: [] // 列表数据
    }
  },
  created () {
    this.get_list()
  },
  methods: {
    // 获取列表
    get_list () {
      this.$base.request({
        that: this,
        url: 'shop/consult/evaluate_index',
        data: {
          id: this.$route.query.id
        }
      }, (res) => {
        if (res.code === 8888) {
          this.list = res.data
        }
      })
    },
    // 菜单状态
    set_status (info) {
      this.$base.request({
        that: this,
        method: 'PUT',
        url: 'shop/consult/evaluate_status',
        data: { id: info.id, status: info.status ? 1 : 0 }
      }, (res) => {
        if (res.code === 8888) {
          this.$base.message({ that: this, message: res.msg })
        } else {
          info.status = !info.status
        }
      })
    },
    // 删除
    destroy (id) {
      this.$base.confirm({ that: this }, () => {
        this.$base.request({
          that: this,
          method: 'DELETE',
          url: 'shop/consult/evaluate_destroy',
          data: { id: id }
        }, (res) => {
          if (res.code === 8888) {
            this.$base.message({ that: this, message: res.msg })
            this.get_list()
          }
        })
      })
    }
  }
}
</script>
